<template>
  <div class="component-addcontract">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span> 下一步
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="component-main">
        <div class="component-main-left">
          <div class="box1">
            <span class="iconfont">&#xe67e;</span>
            <span>项目建项</span>
            <div class="arrow"></div>
          </div>
        </div>
        <!-- 表单部分 -->
        <div class="component-main-right">
          <div class="box" style="margin-top: 46px;">
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :inline="true"
            >
              <el-form-item style="margin-left: 80px;" label-width="300px">
              
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="/api/web/sysFile/uploadFile"
                  :headers="myheader"
                  :file-list="fileList"
                  :auto-upload="true"
                  accept=".xlsx, .xls"
                  :data="exe_data"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :on-exceed="handleExceed"
                  :limit="1"
                  :on-success="handleSuccess"
                >
                  <span style="vertical-align:top">导入相关文件：</span>
                  <el-button
                    size="small"
                    type="primary"
                    style=" width: 202px;
                    height: 45px;
                    border: 1px solid #e4e4e4;
                    "
                  >导入</el-button>
        
                    <input type= "button" @click.stop="submitForm()" class="submitForm" value="解析">
                </el-upload>
              
              </el-form-item>

              <el-form-item
                label="利润值："
                prop="profit"
                label-width="150px"
                style="margin-left: 15px;"
              >
              <el-input v-model="ruleForm.profit"></el-input>
              </el-form-item>

              <el-form-item style="margin-left: 100px;">
                <el-button type="primary" @click="submit()" style="width:180px">提交</el-button>
              </el-form-item>

            </el-form>
          </div>
        </div>
      </div>

           <!-- 项目专业弹窗 -->
        <!-- <div class="component-model">
          <el-dialog :visible.sync="dialogAdd" width="450px">
            上传成功
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogAdd = false">取消</el-button>
              <el-button @click="dialogAdd = false">确定</el-button>
            </span>
          </el-dialog>
        </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "next",
  data() {
    return {
      myheader:{token:localStorage.getItem("token")},
      ruleForm: {
        profit: ""
      },
      // 上传文件
      fileList: [],
      exe_data: {
        parentId: this.$route.params.parentId,
        bizType: "project.design.budget"
      }
    };
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileList=[];
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件上传的 函数
    handleSuccess(response,file, fileList){

    },
    submitForm() {
      // 调解析的接口

       let that = this,
        params = {
          proId: that.$route.params.parentId,
          fileUrl:that.fileList,
        };

      let suCb = res => {
          console.log(res);
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/sysFile/parseExcel",
          methods: "post",
          data: params,
          success: suCb,
          error: erCb
        };
      console.log(req.data);
      that.$https(req);
    }
  }
};
</script>
<style scoped>
.component-main {
  width: 1102px;
  background-color: #fff;
  margin: 50px auto;
  border-top: none;
}
.component-main-left {
  width: 180px;
  height: 338px;
  border: 1px solid #e4e4e4;
  padding-top: 50px;
  float: left;
  border-top: none;
}
.box1 {
  position: relative;
  width: 175px;
  height: 50px;
  text-align: left;
  line-height: 50px;
  background-color: #9ea7b4;
  color: #fff;
  padding-left: 5px;
}
.box1 .arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -40px;
  left: 180px;
  border-width: 25px 0 25px 25px;
  border-style: solid;
  border-color: transparent transparent transparent #9ea7b4; /*透明 透明 透明 灰*/
  margin: 40px auto;
}

/* 表单部分 */

.component-main-right {
  /*height: 500px;*/
  float: right;
  width: 918px;
  margin: 0 auto;
  border-top: none;
  padding-top: 150px;
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}

.box {
  width: 500px;
  margin: 0 auto;
}
.box .el-button--primary {
  color: #fff;
  background-color: #1abc9c;
  border-color: #1abc9c;
}
.box .el-form-item {
  width: 450px;
}

.el-form-item .el-form-item__label {
  width: 110px;
}

.el-form-item__content {
  margin-left: -103px;
}
.main-input {
  width: 90px;
  height: 40px;
  border: 1px solid #e4e4e4;
  margin-left: -2px;
  border-left: none;
}
.upload {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #ccc;
  border-radius: 5px;
}
.upload:hover {
  cursor: pointer;
}
.submitForm{
display: inline-block;
width: 50px;
height: 20px;
font-size: 12px;
text-align: center;
background-color: #1abc9b;
border: none;
color: #fff;
border-radius: 5px;
}
.submitForm:hover{
  cursor: pointer;
}

</style>
